import React from 'react';

export default class List extends React.Component{
	constructor(){
		super();
	}
	render(){
		return (
			<main className="main-container col-md-8 col-xs-12">
				<article className="post-item">
					<div className="post-head">
						<div className="post-title">
							<a href="#"><h2>我们是开源运动的参与者</h2></a>
						</div>
						<div className="post-meta">
							<span className="author">作者：<a href="#">Eyas</a></span>
							<span className="datetime">2015年04月12日</span>
						</div>
					</div>
					<div className="post-content">
						<p>这篇博文是 Ghost 创始人 John O Nolan 对开源和商业的深入思考和总结。 希望这篇译文对希望从事开源的同学有所裨益。 长久以来，开源项目和商业公司之间的交集总是令我着迷。在很多方面，他们的理念完全背道而驰、不可调和。一个是完全由社区驱动的社会化产物</p>
					</div>
					<div className="post-permalink">
						<a href="#" className="btn btn-success">阅读全文</a>
					</div>
					<div className="post-footer">
						<div className="post-footer-meta post-taglist">
							<i className="glyphicon glyphicon-folder-open"></i>
							<a href="#">我们</a>
							<a href="#">wordpress</a>
							<a href="#">PHP</a>
						</div>
						<div className="post-footer-meta post-comment">
							<a href="#"><i className="glyphicon glyphicon-tag"></i>
							<span className="comment-count">5</span></a>
							
						</div>
						<div className="post-footer-meta pull-right">
							<a href="#" title="点击收藏"><i className="glyphicon glyphicon-star-empty"></i></a>
							<a href="#" title="分享"><i className="glyphicon glyphicon-send"></i></a>
						</div>
					</div>
				</article>
				<nav className="post-pagination">
				  <ul className="pagination">
				    <li>
				      <a href="#" aria-label="Previous">
				        <i className="glyphicon glyphicon-chevron-left"></i>
				      </a>
				    </li>
				    <li><a href="#">1</a></li>
				    <li><a href="#">2</a></li>
				    <li><a href="#">3</a></li>
				    <li><a href="#">4</a></li>
				    <li><a href="#">5</a></li>
				    <li>
				      <a href="#" aria-label="Next">
				        <i className="glyphicon glyphicon-chevron-right"></i>
				      </a>
				    </li>
				  </ul>
				</nav>
			</main>
		)
	}
}